<template>
  <div>

    <el-table :data="props.whichList"
              height="270"
              style="width: 90%;margin-left: 80px;"
              :row-style="{height: '45px'}"
    >
      <el-table-column prop="name" label="歌曲" width="400">
        <template #default="scope" >
<!--          <heart-filled  style="fontSize:18px ;color:#FF3030"/>-->
          <span  class="tmp sn" @click="search1(scope.row[0].name)">{{scope.row[0].name}}</span>
<!--          <el-icon style="float: right;" size="20px"><FolderAdd /></el-icon>-->
<!--          <el-icon style="float: right;margin-left: 10px;"  size="20px"><Download /></el-icon>-->
<!--          <el-icon style="float: right;margin-left: 10px;" size="20px"><MoreFilled /></el-icon>-->
            <el-icon style="float: right;margin-left: 10px;" size="20px" @click="play(scope.row[0].id)"><VideoPlay /></el-icon>
          <el-icon v-if="scope.row[0].mv" style="float: right;margin-left: 10px;" size="20px"  @click="playMV(scope.row[0].mv)"><youtube-outlined /></el-icon>
        </template>
      </el-table-column>
     <el-table-column prop="artists" label="歌手" width="180" >
      <template #default="scope" >
        <span  class="ar" @click="searchway=2;search1(scope.row[0].ar[0].name)">{{scope.row[0].ar[0].name}}</span>
      </template>
     </el-table-column>
     <el-table-column prop="al.name" label="专辑"  >
     <template #default="scope" >
       <span class="al" @click="search1(scope.row[0].al.name)">
      {{scope.row[0].al.name}}
         </span>
      </template>
      </el-table-column>
      <el-table-column prop="dt" label="时长"  :formatter="dtData">
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import axios from "axios";
import {baseURL} from "@/request/index.js";
import {ref, defineProps} from "vue";
import {useSongsStore,useMVStore} from "@/Store/Pinia/pinia"
const mvstore=useMVStore();
const songsStore =useSongsStore();
const router = useRouter();
const mvurl=ref('');
const searchway=ref(1);

const props = defineProps({
  whichList: {
    type: String
  },
  listType:{
    type:Number
  }
})

  function dtData(row){
    var t;
    if(row[0].dt> -1){
      var min = Math.floor(row[0].dt/1000/60);
      var sec = row[0].dt/1000-min*60;
      if(min < 10) {
        t = '0'+ min + ":";
      } else {
        t = min + ":";
      }
      if(sec < 10){
        t += "0";
        t+=sec;}
      else{
        t+=sec;
      }
      t=t.substring(0,5);
      return t;
    }
}
function play(id) {
  console.log(props.listType);
  console.log(typeof props.listType)
  if(props.listType==2){songsStore.listType=2}
  if(props.listType==3){songsStore.listType=3}
  console.log(songsStore.listType)
  songsStore.getcurrentplay(id);
  songsStore.getlyc(id);
  axios.post(baseURL+"/song/url?id=" + id).then((res) => {  //获取歌曲地址
    console.log(res.data.data[0].url);
    songsStore.getSongUrl(res.data.data[0].url)
    console.log(songsStore.picUrl);
    songsStore.readyplay();
  })
}
function playMV(mvid){
  console.log(mvid)
  axios.post(baseURL+"/mv/url?id=" + mvid).then((res) => { //获取MV地址
    mvurl.value = res.data.data.url;
  }).then(()=>{
    mvstore.$patch((state)=>{
      state.mvid=mvid;
    })
    router.push({name:'songsMV',params:{mvurl:mvurl.value}})
  })
}

function search1(value){
  songsStore.show=1;
  songsStore.search(value);
  if(searchway.value===1) {
    router.push({path: '/homePage/searchList/1'})
  }
  else{
    searchway.value=1;
    router.push({path:'/homePage/singerDetail/5'})
  }
}

</script>

<style scoped>
.tmp{
  white-space:nowrap;/*强制单行显示*/
  text-overflow:ellipsis;/*超出部分省略号表示*/
  overflow:hidden;/*超出部分隐藏*/
  width: 200px;/*设置显示的最大宽度*/
  display:inline-block;
}
.tmp-next{
  vertical-align: top;
}
.ar:hover,.sn:hover,.al:hover{
  cursor: pointer;
  color: #8e09dc;
}
</style>